<template>
  <ContentWrap>
    <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />

    <Table
      v-model:pageSize="tableObject.pageSize"
      v-model:currentPage="tableObject.currentPage"
      :selection="false"
      :columns="allSchemas.tableColumns"
      :data="tableObject.tableList"
      :loading="tableObject.loading"
      :pagination="{
        total: tableObject.total
      }"
      @register="register"
    >
      <template #action="{ row }">
        <ElButton type="danger" @click="delData(row, false)">
          {{ t('OnlineUser.crash') }}
        </ElButton>
      </template>
    </Table>
  </ContentWrap>
</template>

<script setup lang="ts" name="OnlineUser">
import { ContentWrap } from '@/components/ContentWrap'
import { Search } from '@/components/Search'
import { useI18n } from '@/hooks/web/useI18n'
import { Table } from '@/components/Table'
import { ElImage } from 'element-plus'
import { getOnlineUserListApi, forceLogoutApi } from '@/api/modules/onLineUser'
import { useTable } from '@/hooks/web/useTable'
import { RoleTable } from '@/api/table/types'
import { h, ref, reactive } from 'vue'
import { TableColumn } from '@/types/table'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'

const { t } = useI18n()
const { register, tableObject, methods } = useTable<RoleTable>({
  getListApi: getOnlineUserListApi,
  delListApi: forceLogoutApi,
  delMessage: {
    tip: t('common.outMessage'),
    err: t('common.actionErr'),
    success: t('common.actionSuc')
  },
  defaultParams: {
    column: 'createTime',
    order: 'desc',
    field: 'id,,username,realname,avatar,birthday,sex,phone,action',
    pageNo: 1,
    pageSize: 10
  },
  response: {
    res: 'records',
    list: 'result',
    total: 'total'
  }
})

const { getList, setSearchParams } = methods

getList()

const defaultSrc = new URL(`@/assets/imgs/avatar.png`, import.meta.url).href
const crudSchemas = reactive<CrudSchema[]>([
  {
    field: 'username',
    label: t('OnlineUser.username'),
    search: {
      show: true
    }
  },
  {
    field: 'realname',
    label: t('OnlineUser.realname')
  },
  {
    field: 'avatar',
    label: t('OnlineUser.avatar'),
    formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
      // @ts-expect-error
      return h(ElImage, {
        style: {
          width: '50px',
          height: '50px'
        },
        src: cellValue || defaultSrc,
        fit: 'cover'
      })
    }
  },
  {
    field: 'birthday',
    label: t('OnlineUser.birthday')
  },
  {
    field: 'sex_dictText',
    label: t('OnlineUser.sex_dictText')
  },

  {
    field: 'phone',
    label: t('OnlineUser.phone')
  },
  {
    field: 'action',
    width: '260px',
    label: t('OnlineUser.action')
  }
])

const { allSchemas } = useCrudSchemas(crudSchemas)

const delLoading = ref(false)

const delData = async (row: RoleTable | null, multiple: boolean) => {
  tableObject.currentRow = row
  const { delList } = methods
  delLoading.value = true
  await delList({ token: row?.token as string }, multiple).finally(() => {
    delLoading.value = false
  })
}
</script>
